<template>
  <div>
    <!-- table部分 -->
    <div class="mg-0_5em">
      <div class="w-100 mb-0_5em flex-container flex-row-left" v-role="'supper_admin'">
        <el-button type="primary" :icon="CirclePlus" @click="openDictDialog(false)"> 添加字典</el-button>
      </div>

      <el-table :data="dictList" border row-key="id" table-layout="auto">
        <el-table-column prop="dictName" label="字典名称" />
        <el-table-column prop="dictCode" label="字典编码">
          <template #default="{ row }">
            <div>
              <el-link type="primary" @click="openDictItemDrawer(row)">{{ row.dictCode }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="systemFlag" label="系统内置" width="90">
          <template #default="{ row }">
            <Dictionary mode="tag" dict-code="YesNo" :item-value="row.systemFlag"></Dictionary>
          </template>
        </el-table-column>
        <el-table-column prop="dictDesc" label="字典描述" />
        <el-table-column label="操作" align="center" width="40" v-role="'supper_admin'">
          <template #default="{ row }">
            <el-popover placement="right" width="280" trigger="hover" :popper-style="{ 'background-color': '#ecf5ff', 'border-color': 'white' }">
              <template #reference>
                <el-button type="primary" size="small" :icon="Setting"></el-button>
              </template>
              <div class="flex-container flex-row-center">
                <div>
                  <el-button type="primary" size="small" :icon="View" @click="openDictItemDrawer(row)"> 详情</el-button>
                </div>
                <div class="ml-1em">
                  <el-button type="primary" size="small" :icon="Edit" @click="openDictDialog(true, row)">修改 </el-button>
                </div>
                <div class="ml-1em">
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="Delete"
                    icon-color="red"
                    title="确定删除?"
                    @confirm="deleteDict(row)">
                    <template #reference>
                      <div>
                        <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                      </div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="mr-0_5em mt-1em flex-container flex-row-right">
      <pagination ref="paginationRef" @change="initDictList"></pagination>
    </div>
    <el-drawer v-model="showDictItemDrawer" direction="rtl" size="45%" title="字典项">
      <template #default>
        <div>
          <div class="mb-0_5em">
            <el-button type="primary" :icon="CirclePlus" @click="openDictItemDialog(false)"> 新增</el-button>
          </div>
          <el-table :data="dictItemDrawerData" border row-key="id" table-layout="auto">
            <el-table-column prop="label" label="显示名" />
            <el-table-column prop="value" label="值" />
            <el-table-column prop="meta" label="补充字段">
              <template #header>
                <div class="flex-container flex-row-left">
                  <div>补充字段</div>
                  <div class="ml-0_5em">
                    <el-tooltip effect="dark" content="补充字段,主要用于前端展示的样式" placement="top">
                      <el-icon><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="systemFlag" label="系统内置" width="90">
              <template #default="{ row }">
                <Dictionary mode="tag" dict-code="YesNo" :item-value="row.systemFlag"></Dictionary>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="40">
              <template #default="{ row }">
                <el-popover placement="right" width="180" trigger="hover" :popper-style="{ 'background-color': '#ecf5ff', 'border-color': 'white' }">
                  <template #reference>
                    <el-button type="primary" size="small" :icon="Setting"></el-button>
                  </template>
                  <div class="flex-container flex-row-center">
                    <div class="ml-1em">
                      <el-button type="primary" size="small" :icon="Edit" @click="openDictItemDialog(true, row)">修改 </el-button>
                    </div>
                    <div class="ml-1em">
                      <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="Delete"
                        icon-color="red"
                        title="确定删除?"
                        @confirm="deleteDict(row)">
                        <template #reference>
                          <div>
                            <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                          </div>
                        </template>
                      </el-popconfirm>
                    </div>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-drawer>

    <edit-dict ref="editDictRef" @success="initDictList"></edit-dict>
    <edit-dict-item ref="editDictItemRef" @success="initDictItem"></edit-dict-item>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete, CirclePlus, Edit, Setting, View, QuestionFilled } from '@element-plus/icons-vue'
import Dict from '@/api/sys/dict'
import { isNotEmpty } from '@/utils/validate'
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage } from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue'
import EditDict from '@/views/sys/dict/components/EditDict.vue'
import EditDictItem from '@/views/sys/dict/components/EditDictItem.vue'
import Dictionary from '@/components/Dictionary/index.vue'
import useStore from '@/store'

const { dictStore } = useStore()

// 生命周期, 初始化数据
onMounted(() => {
  initDictList()
})

/**
 * 字典
 */
const dictList = ref([])
// 查询条件
const dictQuery = ref({
  username: '',
  userPhone: '',
})

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
async function initDictList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0 }
  }
  pageInfo.condition = dictQuery.value
  const { result } = await Dict.page(pageInfo)
  const { total, records } = result
  dictList.value = records
  paginationRef.value.changeTotal(total, pageInfo.size)
}

// 编辑组件
const editDictRef = ref()

/**
 * 打开弹框
 * @param edit true表示修改，false表示新增
 * @param row 当前行
 */
function openDictDialog(edit, row) {
  // 新增时候定义默认字典父级ID是0
  let dict = {
    id: null,
    dictCode: null,
    dictName: null,
    dictDesc: null,
    systemFlag: 0,
  }
  // 修改时候将 row 赋值给 dict
  if (edit) {
    Object.assign(dict, row)
  }
  editDictRef.value.switchDialog(edit, dict)
}

// 展示字典项内容标识
const showDictItemDrawer = ref(false)

// 当前展示字典项的信息
const dictItemDrawerData = ref([])

// 当前展示字典项的字典ID
const currentDictId = ref(null)

/**
 * 打开字典项抽屉
 * @param row 当前行
 */
function openDictItemDrawer(row) {
  currentDictId.value = row.id
  Dict.getAllDictItem(row.id).then(({ result }) => {
    dictItemDrawerData.value = result
    showDictItemDrawer.value = true
  })
}

// 初始化字典项
function initDictItem() {
  Dict.getAllDictItem(currentDictId.value).then(({ result }) => {
    dictItemDrawerData.value = result
  })
}

// 编辑字典项组件
const editDictItemRef = ref()

/**
 * 打开字典项弹框
 * @param edit true表示修改，false表示新增
 * @param row 当前行
 */
function openDictItemDialog(edit, row) {
  // 新增时候定义默认字典父级ID是0
  let dictItem = {
    id: null,
    dictId: currentDictId.value,
    label: '',
    value: '',
    meta: null,
    systemFlag: 0,
  }
  // 修改时候将 row 赋值给 dictItem
  if (edit) {
    Object.assign(dictItem, row)
  }
  editDictItemRef.value.switchDialog(edit, dictItem)
}

/**
 * 删除
 */
function deleteDict(dict) {
  if (isNotEmpty(dict.children)) {
    ElMessage.error('该字典存在子级不能删除')
  } else {
    Dict.delete(dict.id).then(() => {
      initDictList()
      dictStore.initDict()
    })
  }
}
</script>

<style lang="scss" scoped></style>
